﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>svg加载动画效果登录页面</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <main>
        <form class="form">
            <div class="form__cover"></div>
            <div class="form__loader">
                <div class="spinner active">
                    <svg class="spinner__circular" viewBox="25 25 50 50">
                        <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"></circle>
                    </svg>
                </div>
            </div>
            <div class="form__content">
                <h1>登录</h1>
                <div class="styled-input">
                    <input type="text" class="styled-input__input" name="username" id='username'>
                    <div class="styled-input__placeholder">
                        <span class="styled-input__placeholder-text">用户名</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div><div class="styled-input">
                    <input type="text" class="styled-input__input" name='password' id='password'>
                    <div class="styled-input__placeholder">
                        <span class="styled-input__placeholder-text">密码</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <button type="button" class="styled-button">
                    <span class="styled-button__real-text-holder">
                        <span class="styled-button__real-text">登录</span>
                        <span class="styled-button__moving-block face">
                            <span class="styled-button__text-holder">
                                <span class="styled-button__text">登录</span>
                            </span>
                        </span><span class="styled-button__moving-block back">
                            <span class="styled-button__text-holder">
                                <span class="styled-button__text">登录</span>
                            </span>
                        </span>
                    </span>
                </button>
            </div>

        </form>
    </main>

    <script src="js/index.js"></script>

 
</body>
</html>